<template>
	<div class="hello">
		<div id="app" style="width: 100%;overflow: hidden;">
			<!-- <div style="float: left;margin: 10px auto;"> -->
			<!-- 日期 -->
			<!-- <el-tag style="margin: 0 10px;">选择时间</el-tag> -->
			<!-- <el-date-picker v-model="date" type="date" placeholder="日期" value-format="yyyy-MM-dd"
					style="width: 150px;height: 32px;"></el-date-picker> -->



			<!-- 姓名(表单) -->
			<!-- <el-tag style="margin: 0 10px;">值班人员</el-tag>
				<el-input size="small" style="width:100px" v-model="name" placeholder="请输入姓名"></el-input>
 -->
			<!-- 性别(男,女) -->
			<!-- <el-tag style="margin: 0 10px;">性别</el-tag>
				<el-input size="small" style="width:100px" v-model="sex" placeholder="请输入性别"></el-input> -->
			<!-- <select name="sex"
					style="height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;outline-style: none;"
					v-model="sex">
					<option value="" selected="selected">男</option>
					<option value="">女</option>
				</select> -->

			<!-- 电话号码 -->
			<!-- <el-tag style="margin: 0 10px;">电话号码</el-tag>
				<el-input size="small" style="width:100px" v-model="phone" placeholder="请输入电话"></el-input> -->
			<!-- </div> -->

			<div style="float: right;margin: 10px;">
				<!-- 地址(表单) -->
				<!-- <el-input size="small" style="width:100px" v-model="address" placeholder="请输入备注"></el-input> -->
				<!-- 新增(控件) -->

				<!-- <el-button size="small" type="primary" @click="handleCurrentChange">新增</el-button> -->
				<el-button type="primary" @click="dialogVisible = true" size="small">新增</el-button>
				<!-- 删除(控件) -->
				<el-button size="small" type="primary" @click="delRow">删除</el-button>

				<!-- 新弹窗 -->
				<el-dialog title="新添加" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
					<!-- 弹窗内容 -->
					<el-divider content-position="left">姓名<span style="color: red;">*</span></el-divider>
					<el-input placeholder="请输入姓名" prefix-icon="el-icon-user-solid" v-model="nameipt" maxlength="10"
						show-word-limit></el-input>
					<div style="margin: 24px auto;">
						<el-radio v-model="sex" label="男">男</el-radio>
						<el-radio v-model="sex" label="女">女</el-radio>
					</div>
					<el-divider content-position="left">职位<span style="color: red;">*</span></el-divider>
					<div style="margin: 10px auto;">
						<el-input placeholder="班主任... ..." v-model="job" class="input-with-select" maxlength="10"
							show-word-limit>
							<el-select v-model="post" slot="prepend" placeholder="请选择" style="width: 100px;">
								<div>
									<el-option label="前端" value="前端"></el-option>
								</div>
								<div>
									<el-option label="后端" value="后端"></el-option>
								</div>
								<div>
									<el-option label="测试" value="测试"></el-option>
								</div>
							</el-select>
							<el-button slot="append" icon="el-icon-medal"></el-button>
						</el-input>
					</div>
					<el-divider content-position="left">值班时间<span style="color: red;">*</span></el-divider>
					<div style="margin: 30px 0;">
						<el-date-picker v-model="date" type="datetimerange" start-placeholder="开始日期"
							end-placeholder="结束日期" :default-time="['12:00:00']"  format="yyyy-MM-dd HH:mm" >
						</el-date-picker>
					</div>
					<el-divider content-position="left">移动电话<span style="color: red;">*</span></el-divider>
					<div>
						<el-input placeholder="请输入号码" v-model="phone" maxlength="11" show-word-limit>
							<template slot="prepend">
								<div style="width: 100%;height: 100%;"><i>N</i></div>
							</template>
						</el-input>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleCurrentChange()">确 定</el-button>
					</span>
				</el-dialog>
			</div>


			<!-- 内容部分 -->
			<el-table :data="information.slice((currentPage - 1)*pageSize,currentPage*pageSize)" style="width: 100%;">
				<el-table-column prop="year" label="日期" width="300">
				</el-table-column>
				<el-table-column prop="name" label="值班老师" width="180">
				</el-table-column>
				<el-table-column prop="job" label="职位" width="180">
				</el-table-column>
				<el-table-column prop="sex" label="性别" width="180">
				</el-table-column>
				<el-table-column prop="phone" label="电话" width="180">
				</el-table-column>
				<el-table-column prop="remarks" label="备注">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<!-- 侧边控件 -->
					<template slot-scope="scope">
						<!-- scope.$index：传入当前index  scope.row:传入当前数据 -->

						<el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button @click.native.prevent="deleteRow(scope.$index, information)" type="text"
							size="small">
							移除</el-button>

					</template>
				</el-table-column>
			</el-table>

			<!-- 弹窗部分 -->
			<el-dialog title="修改信息" :visible.sync="editFormVisible" :close-on-click-modal="false" class="edit-form">
				<el-form :model="editForm" label-width="80px" ref="editForm">
					<el-form-item label="姓名*" prop="Name">
						<span></span>
						<el-input v-model="editForm.name" auto-complete="off"></el-input>
					</el-form-item>
					<div style="height: 15px;"></div>
					<el-form-item label="电话*" prop="phone">
						<el-input v-model="editForm.phone" auto-complete="off"></el-input>
					</el-form-item>
					<div style="height: 15px;"></div>
					<el-form-item label="日期*" prop="date">
						<el-input v-model="editForm.date" auto-complete="off"></el-input>
					</el-form-item>
					<div style="height: 15px;"></div>
					<el-form-item label="备注*" prop="remarks">
						<el-input v-model="editForm.remarks" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click.native="handleCancel('editForm')">取消</el-button>
					<el-button type="primary" @click.native="handleUpdate('editForm')">确定</el-button>
				</div>
			</el-dialog>
			<!-- 分页组件 -->
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChanges"
				layout="total, prev, sizes,  pager, next, jumper" :page-sizes="[10,20,30,40,50]" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				dialogVisible: false,
				information: [],
				// 名字
				nameipt: '',
				// 下拉
				job: '',
				post: '',
				//性别
				radio: '1',
				// 时间
				date: '',
				//编辑界面数据
				input1: '',
				editForm: {
					name: '',
					date: '',
					remarks: '',
					index: 0,
					phone: '',
					sex: '',
				},
				// 分页的参数
				total: this.total,
				currentPage: 1, //当前页数
				pageSize: 10, // 每页显示条数 
				//定义属性
				name: undefined,
				date: undefined,
				sex: undefined,
				remarks: undefined,
				phone: undefined,
				job:undefined,
				//默认dialog弹窗不打开（true打开，false为不打开）
				editFormVisible: false,
				//模拟表格数据
				// tableData: [{
				// 	date: '2016-05-02',
				// 	name: '派大星老师',
				// 	sex: '女',
				// 	phone: 1433223,
				// 	remarks: '今日无要事'
				// }, {
				// 	date: '2016-05-04',
				// 	name: '海绵宝宝老师',
				// 	sex: '男',
				// 	phone: 1433223,
				// 	remarks: '今日无要事'
				// }, {
				// 	date: '2016-05-01',
				// 	name: '章鱼哥老师',
				// 	sex: '男',
				// 	phone: 1433223,
				// 	remarks: '今日无要事'
				// }, {
				// 	date: '2016-05-03',
				// 	name: '珊迪老师',
				// 	sex: '男',
				// 	phone: 1433223,
				// 	remarks: '今日无要事'
				// }],

			}

		},
		methods: {
			//新增数据方法
			handleCurrentChange: function() {
				this.dialogVisible = false;
				console.log(this.date);
				var air = JSON.stringify(this.date);
				console.log(air);
				if (this.nameipt == null) {
					alert('名字不能为空')
				} else if (this.job == null && this.post == null) {
					alert('职位不能为空')
				} else if (this.date == null) {
					alert('时间不能为空')
				} else if (this.phone == null) {
					alert('号码不能为空')
				} else {
					this.information.push({
						year: this.date,
						name: this.nameipt,
						sex: this.sex,
						job: this.post + this.job,
						phone: this.phone,
						remarks: this.remarks
					});
				}
			},
			// 分页
			handleSizeChange(val) {
				this.pageSize = val
				this.currentPage = 1
				console.log(`每页 ${val} 条`)
			},
			handleCurrentChanges(val) {
				this.currentPage = val
				console.log(`当前页: ${val}`)
			},
			//删除最后一行数据
			delRow(index, row) {
				this.information.splice(this.information.indexOf(row), 1);
			},
			//删除当前行数据
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			//编辑
			handleEdit: function(index, row) {
				this.editFormVisible = true; //dialog对话窗口打开
				this.editForm = Object.assign({}, row); //将数据传入dialog页面
				this.editForm.index = index; //传递当前index
			},
			//取消
			handleCancel(formName) {
				this.editFormVisible = false;
			},
			//更新
			handleUpdate(forName) {
				//dialog页面数据写入到tableData页面上
				//this.$set(tableName,talbeIndex,data)
				this.$set(this.information, this.editForm.index, {
					date: this.editForm.date,
					name: this.editForm.name,
					sex: this.editForm.sex,
					phone: this.editForm.phone,
					remarks: this.editForm.remarks,
				});
				this.editFormVisible = false;
			},
			getApiData() {
				this.$axios({
					method: 'get', //请求方式
					url: 'http://10.1.8.189:3000/api/user/all', //请求路径
					params: {} //发送的数据
				}).then((res) => {
					console.log(res.data); //["data"]
					this.information = res.data;
					console.log(this.information);
				}).catch((err) => console.log(err));
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleNodeClick(data) {
				console.log(data);
			}

		},
		mounted() {
			this.getApiData();


		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}


	.el-scrollbar {
		display: block !important;
	}

	.el-dropdown {
		vertical-align: top;
	}

	.el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
